<template>
  <div
    v-if="!appStore.isDeep"
    class="box-border h-240 cursor-pointer overflow-hidden rounded-8 p-20"
    :style="{
      border: `1px solid rgba(231, 234, 240, 0.5)`,
      background: active
        ? `#FFF linear-gradient(to bottom, ${statusResult.color}26 0, #FFF 120px)`
        : `#FFF`,
      boxShadow: active ? `0px 10px 20px 0px rgba(56,48,129,0.12)` : 'none',
    }"
  >
    <div class="flex">
      <div
        class="status h-28 flex items-center justify-between gap-6 rounded-4 px-8"
        :style="{ background: `${statusResult.color}14` }"
      >
        <img class="h-16 w-16" :src="statusResult.icon" />
        <div class="h-16 text-12 font-500" :style="{ color: statusResult.color }">
          {{ statusResult.text }}
        </div>
      </div>
    </div>
    <div class="name my-10 text-18 color-#140D35 font-bold">
      <n-ellipsis>{{ info.testName }}</n-ellipsis>
    </div>
    <div class="light-item">
      <n-ellipsis>被测对象名称：{{ info.testName }}</n-ellipsis>
    </div>
    <div class="light-item">
      <n-ellipsis>数据集：{{ info.datasetNames }}</n-ellipsis>
    </div>
    <div class="light-item">
      <n-ellipsis>测试类型：{{ info.testTypeName }}</n-ellipsis>
    </div>
    <div class="flex items-center justify-between pt-10">
      <div class="time text-12 color-#817E92">{{ $format(info.createTime) }}</div>
      <div
        class="handle h-28 w-56 flex cursor-pointer items-center justify-center rounded-16 text-12 lh-12"
        :style="{
          color: statusResult.handleColor,
          border: `1px solid ${statusResult.handleBorder}`,
        }"
        @click="handleClick"
      >
        {{
          notEvaluateSimulatorValues.includes(props.info.simulator)
            ? '查看'
            : statusResult.handleText
        }}
      </div>
    </div>
  </div>
  <div v-else class="deep-card" :class="{ active }">
    <img class="slider top" src="@/assets/images/deep-card-top.png" />
    <img class="slider btm" src="@/assets/images/deep-card-top.png" />
    <div class="main">
      <div class="flex">
        <div
          class="status h-28 flex items-center justify-between gap-6 rounded-4 px-8"
          :style="{ background: `${statusResult.color}29` }"
        >
          <img class="h-16 w-16" :src="statusResult.icon" />
          <div class="h-16 text-12 font-500" :style="{ color: statusResult.color }">
            {{ statusResult.text }}
          </div>
        </div>
      </div>
      <div class="my-10 text-18 color-#FFF font-bold lh-26">
        <n-ellipsis>{{ info.testName }}</n-ellipsis>
      </div>
      <div class="deep-item">
        <n-ellipsis>被测对象名称：{{ info.testName }}</n-ellipsis>
      </div>
      <div class="deep-item">
        <n-ellipsis>数据集：{{ info.datasetNames }}</n-ellipsis>
      </div>
      <div class="deep-item">
        <n-ellipsis>测试类型：{{ info.testTypeName }}</n-ellipsis>
      </div>
      <div class="flex items-center justify-between pt-10">
        <div class="time text-12 color-#FFFFFFCC">{{ $format(info.createTime) }}</div>
        <div
          class="handle h-34 w-68 flex cursor-pointer items-center justify-center text-12 lh-12"
          :style="{
            color: statusResult.handleColor,
            background: `url(${statusResult.handleBg}) no-repeat`,
          }"
          @click="handleClick"
        >
          {{
            notEvaluateSimulatorValues.includes(props.info.simulator)
              ? '查看'
              : statusResult.handleText
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
import * as testRecordApi from '@/api/testRecord'
import { lightStatusMap, deepStatusMap } from '@/enum/test'
import { notEvaluateSimulatorValues } from '@/enum/simulator'
defineOptions({
  name: 'TestCard',
})
const appStore = useAppStore()
const emits = defineEmits(['del'])
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
  active: {
    type: Boolean,
    default: false,
  },
})
const router = useRouter()
const statusResult = computed(() => {
  return (appStore.isDeep ? deepStatusMap : lightStatusMap)[props.info.startupState]
})

function handleClick() {
  if (props.info.startupState == 2) {
    const dialog = $dialog.warning({
      title: '提示',
      content: `请确定是否删除：${props.info.testName}`,
      negativeText: '取消',
      positiveText: '确定',
      positiveButtonProps: {
        color: appStore.buttonColor,
      },
      async onPositiveClick() {
        try {
          dialog.loading = true
          testRecordApi.del(props.info.id).then(() => {
            dialog.loading = false
            $message.success('删除成功！')
            emits('del')
          })
        } catch (error) {
          console.log('error:', error)
          dialog.loading = false
        }
      },
    })
  } else {
    router.push({ path: '/test/detail', query: { id: props.info.id } })
  }
}
</script>
<style lang="scss" scoped>
@mixin quadrangle($color, $size, $width) {
  background: linear-gradient(to top, $color, $color) left top no-repeat,
    //上左
    linear-gradient(to right, $color, $color) left top no-repeat,
    //左上
    linear-gradient(to left, $color, $color) right top no-repeat,
    //上右
    linear-gradient(to bottom, $color, $color) right top no-repeat,
    //上右
    linear-gradient(to left, $color, $color) left bottom no-repeat,
    //下左
    linear-gradient(to bottom, $color, $color) left bottom no-repeat,
    //左下
    linear-gradient(to top, $color, $color) right bottom no-repeat,
    //下右
    linear-gradient(to left, $color, $color) right bottom no-repeat; //右下
  background-size: $width $size, $size $width, $width $size, $size $width;
}
.light-item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #6c687c;
  line-height: 20px;
}
.deep-item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffffffcc;
  line-height: 20px;
  font-weight: 400;
}
.deep-card {
  cursor: pointer;
  position: relative;
  @include quadrangle(#2ba1ff, 13px, 2px);
  padding: 1px;
  .arr {
    position: absolute;
    z-index: 10;
    width: 13px;
    height: 13px;
  }
  .slider {
    display: none;
    position: absolute;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);
    &.top {
      top: -10px;
    }
    &.btm {
      bottom: -10px;
      transform: translateX(-50%) rotateX(180deg);
    }
  }
  .main {
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(49, 152, 228, 0.1);
    background-image: url(@/assets/images/deep-card-cell-bg.png);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    border: 1px solid rgba(43, 161, 255, 0.5);
  }
  &.active {
    .main {
      background-color: rgba(49, 152, 228, 0.22);
    }
    &::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      display: block;
      width: calc(100% - 12px);
      height: 6px;
      background: rgba(49, 152, 228, 0.1);
      border: 1px solid rgba(49, 152, 227, 0.5);
    }
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: calc(80%);
      transform: translateX(-50%);
      width: calc(100% - 68px);
      height: 92px;
      background: #3198e4;
      opacity: 0.44;
      filter: blur(50px);
    }
    .slider {
      display: block;
    }
  }
}
</style>
